<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="lz-tips">
        <label>开始和结束时间:</label>
      </div>
      <el-date-picker
        v-model="selectDate"
        @change="advanced()"
        type="daterange"
        align="right"
        value-format="yyyy-MM-dd"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      >
      </el-date-picker>

      <div class="lz-tips">
        <label>vip1:</label>
      </div>
      <el-select
        v-model="vip1"
        placeholder="VIP1"
        class="lz-select-vip"
      >
        <el-option
          v-for="item in vipValue"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <div class="lz-tips">
        <label>vip2:</label>
      </div>
      <el-select
        v-model="vip2"
        placeholder="VIP2"
        class="lz-select-vip"
      >
        <el-option
          v-for="item in vipValue"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button
        type="primary"
        @click="advanced()"
      >提交</el-button>

      <el-button
        type="primary"
        @click="showImg"
      >阴超图片</el-button>

      <el-button
        type="primary"
        @click="switchChart"
        v-if="flag"
      >查看曲线</el-button>
      <el-button
        type="primary"
        @click="switchChart"
        v-else
      >全部数据</el-button>
    </div>

    <div class="filter-container">

    </div>

    <graph
      :userInfo="userInfo"
      :processing_value="processing_value"
      :date="selectDate"
      :day_datas="day_datas"
      :ovulateList="ovulateList"
      v-if="!flag"
    ></graph>
    <echartTable
      :table_datas="day_datas"
      :table_loading="table_loading"
      v-else
    ></echartTable>

    <el-row
      :gutter="20"
      style="padding:20px;"
    >
      <el-col
        :span="24"
        class="bottom_btn"
      >
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-arrow-left"
            @click="pageNext(1)"
          >上一周期</el-button>
          <el-button
            type="primary"
            @click="pageNext(2)"
          >下一周期
            <i class="el-icon-arrow-right"></i>
          </el-button>
        </el-button-group>
      </el-col>
    </el-row>

    <el-dialog
      title="检测报告"
      :visible.sync="dialogTableVisible"
    >
      <el-carousel
        :autoplay="false"
        arrow="always"
        height="950px"
      >
        <el-carousel-item
          v-for="(item,index) in pictureCC"
          :key="index"
        >
          <img :src="item.image">
        </el-carousel-item>
      </el-carousel>
    </el-dialog>

  </div>
</template>

<script>
import graph from "@/components/graph";
import echartTable from "@/views/pregnancyEcharts/echartTable";
import { fetchDownloadImg } from "@/api/other";
import {
  physiologicals,
  advancedQuery,
  vipDataQuery,
  ovuPeriod
} from "@/api/chart";
import { formatDate } from "@/utils/common";
import { localData } from "@/utils/local";
import { vip } from "@/utils/vip2";
export default {
  data() {
    return {
      //折线图配置
      option: {},
      //全部周期
      allCycle: [],
      allCycleLength: "",
      //周期天数
      cycleDayLength: "",
      //日期参数
      selectDate: ["", ""],
      //快捷日期
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近半年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      //vip选择
      vipValue: [
        {
          value: "1.1",
          label: "1.1"
        },
        {
          value: "1.2",
          label: "1.2"
        },
        {
          value: "1.3",
          label: "1.3"
        },
        {
          value: "1.4",
          label: "1.4"
        },
        {
          value: "1.5",
          label: "1.5"
        },
        {
          value: "1.6",
          label: "1.6"
        },
        {
          value: "1.7",
          label: "1.7"
        },
        {
          value: "1.8",
          label: "1.8"
        },
        {
          value: "1.9",
          label: "1.9"
        },
        {
          value: "2.0",
          label: "2.0"
        },
        {
          value: "2.1",
          label: "2.1"
        },
        {
          value: "2.2",
          label: "2.2"
        },
        {
          value: "2.3",
          label: "2.3"
        },
        {
          value: "2.4",
          label: "2.4"
        },
        {
          value: "2.5",
          label: "2.5"
        },
        {
          value: "2.6",
          label: "2.6"
        },
        {
          value: "2.7",
          label: "2.7"
        },
        {
          value: "2.8",
          label: "2.8"
        },
        {
          value: "2.9",
          label: "2.9"
        },
        {
          value: "3.0",
          label: "3.0"
        }
      ],
      //vip参数
      vip1: "2.2",
      vip2: "1.6",
      //是否显示
      flag: false,
      //处理值
      processing_value: "",
      //advancedQuery用户返回数据
      userInfo: "",
      //白天数据
      day_datas: "",
      //排卵期
      ovulate: "",
      ovulateList: {},
      //白天参数
      day_filter: [],
      //用户信息
      user: "",
      ovulationDate2: [],
      source: [],
      option: {},
      //检测报告弹框显示
      dialogTableVisible: false,
      //阴超图片
      pictureCC: [],
      table_loading: false
    };
  },
  components: {
    graph,
    echartTable
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.getPhysiologicals();
      // this.getOvuPeriod();
    },
    async getPhysiologicals() {
      //获取默认例假周期
      const phyData = await physiologicals({
        userId: this.$route.query.userId
      });
      if (phyData.status == 200 && phyData.data.menstrualCycle.length > 0) {
        const new_data = new Date();
        const selection_cycle = phyData.data.menstrualCycle.split(",");
        let allCases = [];
        let endTime;
        for (let i = 0; i < selection_cycle.length; i++) {
          const time1 = selection_cycle[i].split(":");
          const lasttime = selection_cycle[selection_cycle.length - 1].split(
            ":"
          );
          const startTime =
            time1[0].substr(0, 4) +
            "-" +
            time1[0].substr(4, 2) +
            "-" +
            time1[0].substr(6, 2);
          endTime =
            lasttime[1].substr(0, 4) +
            "-" +
            lasttime[1].substr(4, 2) +
            "-" +
            lasttime[1].substr(6, 2);
          allCases.push(startTime);
        }
        let pushData = [];
        //日历默认选择最近一次周期&遍历快捷选择
        for (var i = 0; i < allCases.length; i++) {
          if (i == allCases.length - 1) {
            pushData = [allCases[i], endTime];
          }

          //全部周期的结束时间
          const stop =
            new Date(allCases[i + 1]).getTime() - 1000 * 60 * 60 * 24;
          let stop_time = formatDate(stop);

          const start_time = allCases[i];
          if (allCases[i + 1] == undefined) {
            stop_time = endTime;
          }
          const alltime = {
            text: allCases[i] + "~" + stop_time,
            onClick(picker) {
              const end = stop_time;
              const start = start_time;
              picker.$emit("pick", [start, end]);
            }
          };

          this.pickerOptions.shortcuts.push(alltime);
          let onceCycle = [];
          onceCycle.push(start_time);
          onceCycle.push(stop_time);
          this.allCycle.push(onceCycle);
        }
        this.allCycleLength = this.allCycle.length - 1;
        this.selectDate = pushData;
        this.advanced();
        this.getOvuPeriod();
      } else {
        this.$message({
          type: "error",
          message: "该用户未检测"
        });
      }
    },
    async getOvuPeriod() {
      const ovuPeriodData = await ovuPeriod({
        userId: this.$route.query.userId,
        start: this.selectDate[0] + " 00:00:00",
        end: this.selectDate[1] + " 23:59:59"
      });
      if (ovuPeriodData.data) {
        this.ovulateList.ovuolaPeriod = ovuPeriodData.data.ovuolaPeriod.split(
          ","
        );
        this.ovulateList.sexPeriod = ovuPeriodData.data.sexPeriod;
        this.ovulateList.ultrasoundPeriod = ovuPeriodData.data.ultrasoundPeriod;
      }
    },
    switchChart() {
      this.flag = !this.flag;
      this.advanced();
    },
    //获取白天数据
    async advanced() {
      this.getOvuPeriod();
      const advanced = await advancedQuery({
        userId: this.$route.query.userId,
        beginDate: this.selectDate[0],
        endDate: this.selectDate[1],
        beginHour: "05",
        endHour: "15",
        isNormal: this.flag
      });
      this.day_datas = [];
      this.userInfo = {};
      if (advanced.data.dtos.length !== 0) {
        this.day_datas = advanced.data.dtos;
        this.userInfo = {};
        this.userInfo.nickName = advanced.data.nickName;
        this.userInfo.age = advanced.data.age;
        this.userInfo.count = advanced.data.count;
        this.userInfo.cycleFloatingDays = advanced.data.cycleFloatingDays;
        this.userInfo.menstrualCycle = advanced.data.menstrualCycle;
        this.userInfo.menstruationHistory = advanced.data.menstruationHistory;
        this.userInfo.ovuPeriods = advanced.data.ovuPeriods;
        this.userInfo.physiologicalLength = advanced.data.physiologicalLength;
        this.userInfo.predictPhyLength = advanced.data.predictPhyLength;
        this.vipData();
      } else {
        this.$message({
          type: "error",
          message: "该周期暂无数据"
        });
      }
    },
    //vip值
    async vipData() {
      const vipData = await vipDataQuery({
        userId: this.$route.query.userId,
        dataVip: this.vip1,
        dataVip2: this.vip2
      });
      if (vipData.data.peakDataDtos.length !== 0) {
        this.processing_value = vipData.data.peakDataDtos;
      }
    },
    //获取阴超图片
    async getDownloadImg() {
      const download = await fetchDownloadImg({
        userId: this.$route.query.userId,
        startDate: this.selectDate[0],
        endDate: this.selectDate[1]
      });
      if (download.status == "200") {
        this.pictureCC = [];
        if (download.data[0] !== undefined) {
          download.data.map(item => {
            const downloadImg = {};
            downloadImg.image = item.ovuolaImage;
            this.pictureCC.push(downloadImg);
          });
          this.dialogTableVisible = true;
        } else {
          this.$message({
            type: "error",
            message: "暂无阴超图片"
          });
        }
      }
    },
    showImg() {
      this.getDownloadImg();
    },
    pageNext(p) {
      this.table_loading = true;
      if (p == 1) {
        if (this.allCycleLength > 0) {
          this.allCycleLength -= 1;
        } else {
          this.$message({
            type: "error",
            message: "已经是第一个周期"
          });
          return;
        }
      } else {
        if (this.allCycleLength < this.allCycle.length - 1) {
          this.allCycleLength += 1;
        } else {
          this.$message({
            type: "error",
            message: "已经是最后个周期"
          });
          return;
        }
      }

      this.$set(this.selectDate, 0, this.allCycle[this.allCycleLength][0]);
      this.$set(this.selectDate, 1, this.allCycle[this.allCycleLength][1]);
      this.advanced();
    }
  },
  watch: {
    "$route.query.userId": function() {
      this.$router.go(0);
    }
  }
};
</script>

<style lang="less" scoped>
.lz-select-vip {
  width: 100px;
}
.data_section {
  padding: 20px;
  margin-bottom: 40px;
  .section_title {
    text-align: center;
    font-size: 30px;
    margin-bottom: 10px;
  }
  .data_list {
    text-align: center;
    font-size: 14px;
    color: #666;
    border-radius: 6px;
    background: #e5e9f2;
    .data_num {
      color: #333;
      font-size: 26px;
    }
    .head {
      border-radius: 6px;
      font-size: 22px;
      padding: 4px 0;
      color: #fff;
      display: inline-block;
    }
  }
  .today_head {
    background: #ff9800;
  }
  .all_head {
    background: #20a0ff;
  }
}
.bottom_btn {
  text-align: center;
}

.el-carousel__item img {
  width: 100%;
  height: 100%;
}
</style>
